<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东省房源查询平台</title>
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=3.0&ak=MiWRGNsGXSe04YxJc5Ntm4hJjlofkfm5"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">
    <style>
        .list-city-item {
            border-left: 4px solid #0f0f0f;
            border-right: 4px solid #0f0f0f;
            border-bottom: 4px solid #0f0f0f;
        }

        .black1 {
            background-color: #1a1a1d;
        }

        .black2 {
            background-color: #4e4e50;
        }

        .red1 {
            background-color: #6f2232;
        }

        .red2 {
            background-color: #950740;
        }

        .red3 {
            background-color: #c3073f;
        }

        .fangyuan-item {
            padding-bottom: 50px;
        }

        .list-group-region {
            padding-left: 40px;
        }

        .hide {
            display: none;
        }


        .buju {
            height: 700px;
        }

        .buju .col-buju {
            height: 700px;

        }

        .panel-body .list-group :hover {
            background-color: #aa649c;
            color: white;
        }

        .panel-body .item :hover {
            background-color: #aa649c;
            color: white;
        }


        .dance_font {
            /*width: 80px;*/
            color: #77e1bd;
            animation: animate 1s linear infinite;
        }

        .slt {
            padding: 5px 5px 5px 5px;
            color: white;
            background-color: #6f2232;
            border: 2px solid black;
            border-radius: 0;
        }
    </style>

</head>
<body class="red1">
{% load static %}


<nav class="navbar navbar-default black1" style="margin-bottom: 0">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>


        </div>
        <div class="collapse navbar-collapse black1" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav ">
                <li class="active " style="background-color: black"><a href="/"><span
                        style="margin-top: 15px;font-size: 25px; "><span
                        class="dance_font">智慧房源平台</span></span> <span
                        class="sr-only">(current)</span></a></li>
            </ul>
            <p class="text-center "
               style="margin: 10px auto; font:18px bold; color: white">{{ province }}各城市房源信息</p>
        </div>
    </div>
</nav>


<div class="container-fluid clearfix buju" id="mianbao" style="height: 1000px">
    <ol class="breadcrumb text-left read1"
        style="  border: 2px solid black;background-color: #6f2232;border-radius: 0;font-size: 20px;margin-top: 20px; margin-bottom: 0; height: 50px;"
        id="mianbao_data">
        <li style="border-bottom: 2px solid black"><a style="color: white" href="/">大屏</a></li>
        <li style="border-bottom: 2px solid black"><a style="color: white"
                                                      href="/sdfy/?province={{ province }}">{{ province }}房源</a></li>
        <li style="border-bottom: 2px solid black"><a style="color: white" id="region_li"
                                                      onclick="retrun_city(this)"></a></li>
        <li style="border-bottom: 2px solid black"><a style="color: white" id="house_li" class="hide"
                                                      onclick="back_region()"></a></li>
    </ol>
    {#    <div style="border-bottom: 3px solid black"></div>#}
    <div id="no_detail_house_1" class="col-xs-3 col-buju "
         style="background-color: #6f2232;padding-left: 0;padding-right:0;border-radius: 0; display: block ">
        <div id="map_list" class="panel panel-danger" style="background-color: #6f2232;height: 100%">
            <div class="panel-heading"
                 style=";background-color: #6f2232;border-radius: 0;border-top: 4px solid #0f0f0f; border-left: 2px solid #0f0f0f;border-right: 2px solid #0f0f0f;">
                <h3 class="panel-title"><a style="color: white"
                                           href="/sdfy/?province={{ province }}"> {{ province }}</a></h3>
            </div>
            <div class="panel-body" style="background-color: #6f2232;border: 2px solid #0f0f0f">
                <ul class="list-group" id="province_name"
                    style="background-color: #6f2232;height:600px;overflow-y:scroll;">
                    {% for k,v in city_dict.items %}
                        <div class="item" m_value="{{ k }}市" onclick="clk_city(this,'{{ k }}','1')">
                            <li class="list-group-item list-city-item"
                                style="color: white;background-color: transparent;border-radius: 0;">
                                <span style="color: white" class="badge">{{ v }}</span> <span style="color: white"
                                                                                              class="city-name">{{ k }}市</span>
                            </li>
                        </div>
                        {% for k1,v1 in region_in_city_list.items %}
                            {% if k1 == k %}
                                {% for item in v1 %}
                                    <div class="hide" m_value="{{ item }}"
                                         onclick="clk_region(this,'{{ item }}','1')">
                                        <li class="list-group-item list-group-region"
                                            style="color: white;background-color: transparent;border: 2px solid #1c3a36;border-radius: 0">
                                            {{ item }}
                                        </li>
                                    </div>
                                {% endfor %}
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div id="slt_item" class="hide" style=";font-size: 18px;padding-top: 20px">
            <div class="form-group fangyuan-item">
                <label style="padding-top: 5px;color: white" class="col-sm-3 control-label">装修</label>
                <div class="col-sm-9">
                    <select id="zhuangxiu" class="form-control slt" style="width: 100%;">
                        <option value=0 selected>全部</option>
                        <option value=1>简装</option>
                        <option value=2>精装</option>
                        <option value=3>其他</option>
                    </select>
                </div>
            </div>
            <div class="form-group fangyuan-item">
                <label style="padding-top: 5px;color: white" class="col-sm-3 control-label">户型</label>
                <div class="col-sm-9">
                    <select id="huxing" class="form-control slt">
                        <option value=0 selected>全部</option>
                        <option value="1">平层</option>
                        <option value="2">复式</option>
                        <option value="3">毛坯</option>
                    </select>
                </div>
            </div>

            <div class="form-group fangyuan-item">
                <label style="padding-top: 5px;color: white" for="louceng" class="col-sm-3 control-label">楼层</label>
                <div class="col-sm-9">
                    <select id="louceng" class="form-control slt">
                        <option value=0 selected>全部</option>
                        <option value="1">高楼层</option>
                        <option value="2">中楼层</option>
                        <option value="3">低楼层</option>
                    </select>
                </div>
            </div>

            <div class="form-group fangyuan-item">
                <label style="padding-top: 5px;color: white" for="chanquan" class="col-sm-3 control-label">产权</label>
                <div class="col-sm-9">
                    <select id="chanquan" class="form-control slt">
                        <option value=0 selected>全部</option>
                        <option value="1">公有</option>
                        <option value="2">非公有</option>
                    </select>
                </div>
            </div>

            <div class="form-group fangyuan-item">
                <label style="padding-top: 5px;color: white" for="diya" class="col-sm-3 control-label">抵押</label>
                <div class="col-sm-9">
                    <select id="diya" class="form-control slt">
                        <option value=0 selected>全部</option>
                        <option value="1">有抵押</option>
                        <option value="2">无抵押</option>
                    </select>
                </div>
            </div>

            <div class="form-group fangyuan-item">
                <label style="padding-top: 5px;color: white" for="mianji" class="col-sm-3 control-label">面积</label>
                <div class="col-sm-9">
                    <select id="mianji" class="form-control slt">
                        <option value=0 selected>全部</option>
                        <option value="1">50m^2以内</option>
                        <option value="2">51-100m^2以内</option>
                        <option value="3">101-200m^2以内</option>
                        <option value="4">200m^2以上</option>
                    </select>
                </div>
            </div>

            <div class="form-group fangyuan-item">
                <label style="padding-top: 5px;color: white" for="jiage" class=" col-sm-3 control-label">房价</label>
                <div class="col-sm-9" style="font-size:20px">
                    <select style="padding: 5px; "  id="fangjia" class="form-control slt" >
                        <option value=0 selected>全部</option>
                        <option value="1">10万以内</option>
                        <option value="2">10-20万以内</option>
                        <option value="3">20-50万以内</option>
                        <option value="4">50-100万以内</option>
                        <option value="5">100-200万以内</option>
                        <option value="6">200-500万以内</option>
                        <option value="7">500万以上</option>
                    </select>
                </div>
            </div>

            <div class="form-group fangyuan-item">
                <div class="col-sm-offset-2 col-sm-10">
                    <button onclick="search_region()"
                            style="border: 2px solid black;width: 200px;font-size: 20px;background-color: #6f2232"
                            class="btn btn-danger ">查 询
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="detail_house_1" class="col-xs-4 col-buju hide"
         style="background-color: #6f2232;border-radius: 0; padding-left: 0; padding-right: 0 ; display: block ">
        <div class="panel panel-default" style="margin-bottom: 20px;margin-top: 20px; border-radius: 0;">
            <div class="panel-heading" style="font-size: 18px;;background-color: #6f2232;border-radius: 0;border:2px solid black;color: white">
                基本信息
            </div>
            <div class="panel-body"
                 style="background-color: #6f2232;border-radius: 0;border-left:2px solid black;border-right:2px solid black;border-bottom:2px solid black">
                <div style="height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        房屋户型：<span id="span1"></span>
                    </div>
                    <div class="col-xs-6">
                        所在楼层：<span id="span2"></span>
                    </div>
                </div>
                <div style="height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        建筑面积：<span id="span3"></span>
                    </div>
                    <div class="col-xs-6">
                        户型结构：<span id="span4"></span>
                    </div>
                </div>
                <div style="height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        房屋朝向：<span id="span5"></span>
                    </div>
                    <div class="col-xs-6">
                        建筑结构：<span id="span6"></span>
                    </div>
                </div>
                <div style="height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        装修情况：<span id="span7"></span>
                    </div>
                    <div class="col-xs-6">
                        楼户比例：<span id="span8"></span>
                    </div>
                </div>

            </div>
        </div>
        <div class="panel panel-default" style="margin-top: 20px">
            <div class="panel-heading read1" style="font-size: 18px;color: white;background-color: #6f2232;;border-radius: 0;border:2px solid black">交易属性</div>
            <div class="panel-body"
                 style="background-color: #6f2232;border-radius: 0;border-left:2px solid black;border-right:2px solid black;border-bottom:2px solid black">

                <div style="height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        挂牌时间：<span id="span9"></span>
                    </div>
                    <div class="col-xs-6">
                        交易权属：<span id="span10"></span>
                    </div>
                </div>
                <div style="height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        产权所属：<span id="span11"></span>
                    </div>
                    <div class="col-xs-6">
                        抵押信息：<span id="span12"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading read1" style="font-size: 18px;color: white;background-color: #6f2232;border-radius: 0;border:2px solid black">房源特色</div>
            <div class="panel-body"
                 style="height: 205px; background-color: #6f2232;border-radius: 0;border-left:2px solid black;border-right:2px solid black;border-bottom:2px solid black">

                <div style="padding-top: 10px;height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        核心卖点：<span id="span13"></span>
                    </div>
                </div>
                <div style="padding-top: 10px;height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        小区介绍：<span id="span14"></span>
                    </div>
                </div>
                <div style="padding-top: 10px;height: 40px; font-size: 18px; color: white">
                    <div class="col-xs-6">
                        户型介绍：<span id="span15"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="detail_house_2" class="col-xs-8 col-buju hide" style="  display: block ;margin-top: 20px">
        <div id="baidu_map" style="width:100%;height: 100%"></div>
    </div>


    <div id="no_detail_house_2" class="col-xs-9 col-buju read1" style=" ; display: block ">
        <div class="" id="city_map" style="height: 100%;">
        </div>
        <div class="hide" id="region_table" style="height: 100%;background-color: #6f2232; color:#cdc7c7; ">
            <table class="table table-bordered" style="margin-top: 20px;height: 100px; ">
                <thead style=" border: 2px solid black">
                <tr  style=" border: 2px solid black">
                    <th  style=" border: 2px solid black">小区名称</th>
                    <th  style=" border: 2px solid black">所在区域</th>
                    <th  style=" border: 2px solid black">户型结构</th>
                    <th  style=" border: 2px solid black">装修情况</th>
                    <th  style=" border: 2px solid black">房屋户型</th>
                    <th  style=" border: 2px solid black">房屋朝向</th>
                    <th  style=" border: 2px solid black">所在楼层</th>
                    <th  style=" border: 2px solid black">产权</th>
                    <th  style=" border: 2px solid black">抵押</th>
                    <th  style=" border: 2px solid black">建筑面积</th>
                    <th  style=" border: 2px solid black">房价</th>
                    <th  style=" border: 2px solid black">总价</th>
                    <th  style=" border: 2px solid black">挂牌时间</th>
                </tr>
                </thead>
                <tbody id="house_table_body"  style=" border: 2px solid black;">

                </tbody>
            </table>
            <nav aria-label="...">
                <ul id="fenye_father" class="pagination" >
{#                    <li class="disabled" ><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>#}
                </ul>
            </nav>

        </div>

    </div>


</div>

<script src="../static/js/jquery-3.7.1.js"></script>
<script src="../static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="../static/plugins/echarts.js"></script>
<script type="text/javascript">


    var prev_shi = null;

    $(function () {
        init_shandong();

        init_maplist();

    })

    function init_maplist() {
        var list = $("#map_list .panel-body .list-group ").children();
        fist = list.first();
        last = list.last()


        fist.css("border-top", "4px solid black")

        {#fist.addClass("hide")#}
    }

    // 解析数据并转换为适用于ECharts的数据格式
    function parseJinanData(jsonData) {
        var data = [];
        for (var i = 1; i < jsonData.length; i++) {
            var row = jsonData[i];
            if (row && row.length >= 3) {
                data.push({
                    name: row[0],   // 区县名称
                    value: row[1],  // 房源数量
                    avgPrice: row[2]  // 均价
                });
            }
        }
        return data;
    }


    var scatterData = [
        {
            value: [116.80, 37.16]
        },
        {# { #}
        {#    value:[117.283042,31.86119]#}
        {# } #}
    ]

    // 初始化地图
    function initJinanMap(data, myChart) {
        myChart.hideLoading();

        // 使用地图数据 URL
        fetch('https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json') // 济南市地图
            .then(response => response.json())
            .then(geoJson => {
                echarts.registerMap('jinan', geoJson);

                // 设置地图配置
                myChart.setOption({
                    title: {
                        text: '济南市各区房源数据',
                        left: 'center',
                        textStyle: {
                            color: "#ffffff",
                        },
                        padding: 20,
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                            var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                            return params.name + '<br/>' +
                                '房源数量: ' + totalValue + '<br/>' +
                                '均价: ' + avgPrice + '元/平方米';
                        },
                        textStyle: {
                            fontSize: 20 // 设置提示框字体大小为 12
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 25000,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        inRange: {
                            {#color: ['#e0f7fa', '#006064']#}
                            color: ['#baae91', '#e39a0b']
                        },
                        calculable: true
                    },
                    series: [
                        {
                            name: '房源数据',
                            type: 'map',
                            map: 'jinan',
                            label: {
                                show: true,
                                fontSize: 15
                            },
                            roam: true,
                            data: data
                        },
                        {
                            data: scatterData, // 配置散点的数据]
                            type: 'effectScatter', // 设置图表类型为散点图'
                            coordinateSystem: 'geo', // 设置坐标系为地理坐标系
                        }
                    ]
                });
            })
            .catch(error => {
                console.error('Error fetching or processing the map data:', error);
            });
    }

    function init_jinan(city_name) {
        var myChart = echarts.init(document.getElementById('city_map'));
        prev_shi = myChart;
        // 显示加载动画
        myChart.showLoading();


        // 济南市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区县", "房源数量", "均价 (元/平方米)"],
            ["历下区", 20000, 25000],
            ["市中区", 18000, 23000],
            ["槐荫区", 16000, 22000],
            ["天桥区", 14000, 21000],
            ["历城区", 19000, 20000],
            ["长清区", 8000, 18000],
            ["章丘区", 10000, 17000],
            ["济阳区", 7000, 16000],
            ["莱芜区", 6000, 15000],
            ["钢城区", 5000, 14000],
            ["平阴县", 4000, 13000],
            ["商河县", 3000, 12000]
        ];

        $.ajax({
            url: '/region/avg/?city=' + city_name,
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                // 将后台返回的数据更新到图表中
                {#                从后端获取数据#}
                let jsonData = res.data.jsonData;

                // 解析数据并初始化济南市地图
                var parsedData = parseJinanData(jsonData);
                initJinanMap(parsedData, myChart);
            }
        })


    }


    function init_zibo(city_name) {
        var myChart = echarts.init(document.getElementById('city_map'));
        prev_shi = myChart;
        // 显示加载动画
        myChart.showLoading();

        //潍坊市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区", "房源总数", "二手房数量"],
            ["张店区", 12000, 4000],
            ["淄川区", 10000, 3500],
            ["博山区", 9000, 3000],
            ["临淄区", 11000, 3800],
            ["周村区", 8000, 2800],
            ["桓台县", 7000, 2500],
            ["高青县", 6000, 2000],
            ["沂源县", 5000, 1800]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370300_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '淄博市各区房源数据',
                            left: 'center',
                            textStyle: {
                                color: "#ffffff",
                            },
                            padding: 20,
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#baae91', '#e39a0b']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 15
                                },
                                roam: true,
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }


        $.ajax({
            url: '/region/avg/?city=' + city_name,
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                // 将后台返回的数据更新到图表中
                let jsonData = res.data.jsonData;

                // 解析数据并初始化青岛市地图
                var parsedData = parseData(jsonData);
                initMap(parsedData);
            }
        })
    }

    function init_qingdao(city_name) {
        var myChart = echarts.init(document.getElementById('city_map'));
        prev_shi = myChart;
        // 显示加载动画
        myChart.showLoading();

        //青岛市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区", "房源总数", "二手房数量"],
            ["市南区", 15000, 5000],
            ["市北区", 14000, 4500],
            ["李沧区", 12000, 4000],
            ["崂山区", 13000, 4500],
            ["城阳区", 11000, 3500],
            ["黄岛区", 16000, 5500],
            ["即墨区", 10000, 3000],
            ["胶州市", 8000, 2500],
            ["平度市", 7000, 2000],
            ["莱西市", 6000, 1500]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370200_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '青岛市各区房源数据',
                            left: 'center',
                            textStyle: {
                                color: "#ffffff",
                            },
                            padding: 20,
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#baae91', '#e39a0b']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 15
                                },
                                roam: true,
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        $.ajax({
            url: '/region/avg/?city=' + city_name,
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                // 将后台返回的数据更新到图表中
                let jsonData = res.data.jsonData;

                // 解析数据并初始化青岛市地图
                var parsedData = parseData(jsonData);
                initMap(parsedData);
            }
        })

        // 解析数据并初始化青岛市地图
        {#var parsedData = parseData(jsonData);#}
        {#initMap(parsedData);#}
    }


    function init_weifang(city_name) {
        var myChart = echarts.init(document.getElementById('city_map'));
        prev_shi = myChart;
        // 显示加载动画
        myChart.showLoading();

        //潍坊市各区的房源数量和均价（硬编码数据）
        var jsonData = [
            ["区", "房源总数", "二手房数量"],
            ["潍城区", 10000, 3500],
            ["寒亭区", 9000, 3200],
            ["坊子区", 8500, 3000],
            ["奎文区", 11000, 4000],
            ["青州市", 9500, 3300],
            ["诸城市", 10500, 3800],
            ["寿光市", 12000, 4200],
            ["安丘市", 8000, 2800],
            ["高密市", 9000, 3400],
            ["昌邑市", 8500, 3100],
            ["临朐县", 7000, 2500],
            ["昌乐县", 7500, 2700]
        ];

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initMap(data) {
            myChart.hideLoading();

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370700_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '青岛市各区房源数据',
                            left: 'center',
                            textStyle: {
                                color: "#ffffff",
                                padding: 20,
                            },
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#baae91', '#e39a0b']
                            },
                            calculable: true
                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 15
                                },
                                roam: true,
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        $.ajax({
            url: '/region/avg/?city=' + city_name,
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                let jsonData = res.data.jsonData;
                // 解析数据并初始化青岛市地图
                let parsedData = parseData(jsonData);
                initMap(parsedData);
            }
        })

        // 解析数据并初始化潍坊市地图
        var parsedData = parseData(jsonData);
        initMap(parsedData);
    }


    function init_heze(city_name) {
        var myChart = echarts.init(document.getElementById('city_map'));
        prev_shi = myChart;
        // 显示加载动画
        myChart.showLoading();

        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initMap(data) {
            myChart.hideLoading();
            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/371700_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('jinan', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        title: {
                            text: '菏泽市各区房源数据',
                            left: 'center',
                            textStyle: {
                                color: "#ffffff",
                            },
                            padding: 20,
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 25000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#baae91', '#e39a0b']
                            },
                            calculable: true,
                            {#在每个区域上设置点#}


                        },
                        series: [
                            {
                                name: '房源数据',
                                type: 'map',
                                map: 'jinan',
                                label: {
                                    show: true,
                                    fontSize: 15
                                },
                                roam: true,
                                data: data
                            }
                        ]
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
            // 点击事件，进入地区地图
            myChart.on('click', function (params) {
                {#location.href = "/sdfy/?province="+{{ province }} + params.name;#}
                clk_region(this, params.name, '2');
            });
        }


        $.ajax({
            url: '/region/avg/?city=' + city_name,
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                // 将后台返回的数据更新到图表中
                {#                从后端获取数据#}
                let jsonData = res.data.jsonData;

                // 解析数据并初始化青岛市地图
                var parsedData = parseData(jsonData);
                initMap(parsedData);
            }
        })


    }

    function init_shandong() {
        let myChart = echarts.init(document.getElementById('city_map'));
        prev_shi = myChart;
        // 显示加载动画
        myChart.showLoading();

        //潍坊市各区的房源数量和均价（硬编码数据）
        {#let jsonData = [#}
        {#    ["市", "房源总数", "均价"],#}
        {#    ["济南市", 150000, 50000],#}
        {#    ["青岛市", 180000, 60000],#}
        {#    ["烟台市", 130000, 45000],#}
        {#    ["潍坊市", 120000, 42000],#}
        {#    ["淄博市", 110000, 40000],#}
        {#    ["济宁市", 125000, 48000],#}
        {#    ["泰安市", 100000, 35000],#}
        {#    ["威海市", 90000, 32000],#}
        {#    ["日照市", 80000, 30000],#}
        {#    ["临沂市", 140000, 50000],#}
        {#    ["德州市", 105000, 38000],#}
        {#    ["聊城市", 100000, 36000],#}
        {#    ["滨州市", 95000, 34000],#}
        {#    ["菏泽市", 110000, 40000],#}
        {#    ["东营市", 92000, 34500],#}
        {#    ["枣庄市", 100000, 40300],#}
        {#];#}

        let jsonData = {}

        $.ajax({
            url: '/shangdong/info/',
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                console.log("后台获取山东各城市的数据")
                console.log(res.data.jsonData)
                jsonData = res.data.jsonData;
                console.log("转换为的数据")
                console.log(jsonData)

                // 解析数据并初始化山东省地图
                let parsedData = parseData(jsonData);
                {#parsedData = {{ jsonData }}#}
                initShandongMap(parsedData);
            }

        })


        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            var data = [];
            for (var i = 1; i < jsonData.length; i++) {
                var row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 区县名称
                        value: row[1],  // 房源数量
                        avgPrice: row[2]  // 均价
                    });
                }
            }
            return data;
        }

        // 初始化地图
        function initShandongMap(data) {
            myChart.hideLoading();
            let scatterData = [
                {
                    value: [116.0, 36.24]
                },
                {
                    value: [116.17, 37.27]
                },
                {
                    value: [118.0, 37.25]
                },
                {
                    value: [118.35, 37.26]
                },
                {
                    value: [121.26, 37.30]
                },
                {
                    value: [122.7, 37.30]
                }, {
                    value: [117.4, 36.40]
                },
                {
                    value: [118.0, 36.48]
                },
                {
                    value: [119.7, 36.42]
                },
                {
                    value: [120.24, 36.4]
                },
                {
                    value: [117.7, 36.11]
                },
                {
                    value: [115.24, 35.15]
                },
                {
                    value: [116.36, 35.26]
                },
                {
                    value: [118.20, 35.3]
                },
                {
                    value: [119.27, 35.25]
                },
                {
                    value: [117.15, 34.47]
                },
            ]

            // 使用地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json') // 济南市地图
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('shandong', geoJson);

                    // 设置地图配置
                    myChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            {#trigger:'always',#}
                            formatter: function (params) {
                                var avgPrice = params.data && params.data.avgPrice != null ? params.data.avgPrice : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源数量: ' + totalValue + '<br/>' +
                                    '均价: ' + avgPrice + '元/平方米';
                            },
                            textStyle: {
                                fontSize: 20 // 设置提示框字体大小为 12
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 250000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#baae91', '#e39a0b']
                            },
                            calculable: true
                        },
                        geo: {
                            type: "map",
                            map: "shandong",
                            roam: true,
                            label: {
                                show: true,
                                fontSize: 20
                            }

                        },
                        series: [
                            {
                                data: scatterData,
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                itemStyle: {
                                    normal: {
                                        color: '#d14a61',
                                        areaColor: '#175095',
                                        borderColor: '#d13e3e'
                                    },
                                    emphasis: {
                                        color: '#50b839',
                                        areaColor: '#306eb3'
                                    }
                                },
                                legendHoverLink: false, //设置是否启用否则倒加over-时的数据过高亮
                                hoverAnimation: false, //设置是否开启刷新hover的提示功能效果
                                effectType: 'ripple', //设置特效类型，目前只支持差薄特效'‘ripple
                                rippleEffect: {
                                    //设置流特效
                                    period: 2, //设置方面的效果；数字越小，动画越快
                                    scale: 4, //设置m查询中读数的最大值就比例
                                    brushType: "fill", //设置数值的输入大数次比例
                                    color: '#bf0c0c' //设置特效软应用符号的颜色
                                },
                                symbolSize: 20, //设置特效软应用符号的大小
                                color: 'green',
                            },
                            {
                                data: data,
                                geoIndex: 0,
                                type: 'map',
                                map: 'shandong',
                                roam: true,
                                label: {
                                    {#fontSize:20,#}
                                    show: true
                                },

                            }
                        ]
                    })
                    ;
                    // 点击事件，进入地区地图
                    myChart.on('click', function (params) {
                        {#location.href = "/sdfy/?province="+{{ province }} + params.name;#}
                        clk_city(this, params.name, '2');
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }
    }

    let prev_city = null;
    let prev_item = null;
    let pre_item_cnt = 0;

    function clk_city(lab, city_name, sel) {

        $("#region_table").addClass("hide");
        $("#city_map").removeClass("hide");

        $("#slt_item").addClass("hide");
        $("#map_list").removeClass("hide");

        var d = $(lab).next();
        var cnt = 0;
        while (d.hasClass("hide")) {
            d.removeClass("hide");
            cnt++;
            d = d.next()
        }

        if (prev_item != null) {
            while (pre_item_cnt > 0) {
                prev_item.addClass("hide");
                prev_item = $(prev_item).next();
                pre_item_cnt--;
            }
        }
        pre_item_cnt = cnt;
        prev_item = $(lab).next();


        city_name = city_name.replace("市", "");
        {#console.log("点击城市的名称:",city_name);#}
        $("#region_li").text(city_name);

        if (prev_shi != null) {
            prev_shi.dispose();
        }


        switch (city_name) {
            case("青岛"):
                init_qingdao("青岛");
                break;
            case("青岛市"):
                init_qingdao("青岛");
                break;
            case("济南"):
                init_jinan("济南");
                break;
            case("济南市"):
                init_jinan("济南");
                break;
            case("淄博"):
                init_zibo("淄博");
                break;
            case("淄博市"):
                init_zibo("淄博");
                break;
            case("菏泽"):
                init_heze("菏泽");
                break;
            case("潍坊"):
                init_weifang("潍坊");
                break;
            case("菏泽市"):
                init_heze("菏泽");
                break;
            case("潍坊市"):
                init_weifang("潍坊");
                break;
        }

        if (prev_city != null) {
            prev_city.style.backgroundColor = "";
            prev_city.style.color = "";
        }

        if (sel === "1") {// 点击列表
            lab.style.backgroundColor = "#aa649c";
            lab.style.color = "white";
            prev_city = lab;
        } else { // 点击地图

            var ch = $(".item");
            ch.each(function (i, e) {
                console.log("判断:", e.getAttribute("m_value"), city_name)
                if (e.getAttribute("m_value") === city_name + "市") {
                    e.style.backgroundColor = "#aa639b";
                    e.style.color = "white";
                    prev_city = e;

                    var d = $(e).next();
                    var cnt = 0;
                    while (d.hasClass("hide")) {
                        d.removeClass("hide");
                        cnt++;
                        d = d.next()
                    }

                    if (prev_item != null) {
                        while (pre_item_cnt > 0) {
                            prev_item.addClass("hide");
                            prev_item = $(prev_item).next();
                            pre_item_cnt--;
                        }
                    }
                    pre_item_cnt = cnt;
                    prev_item = $(lab).next();

                }
            })
        }
    }

    function clk_region(self, region_name, slt) {

        $("#city_map").addClass("hide");
        $("#region_table").removeClass("hide");

        $("#slt_item").removeClass("hide");
        $("#map_list").addClass("hide");


        $("#house_li").text(region_name);
        $("#house_li").removeClass("hide");

        $("#house_table_body").empty();


    }

    function retrun_city(self) {

        {#  省 市 区 #}
        $("#detail_house_1").addClass("hide");
        $("#detail_house_2").addClass("hide");
        $("#region_table").addClass("hide");
        $("#slt_item").addClass("hide");


        $("#map_list").removeClass("hide");
        $("#city_map").removeClass("hide");
        $("#no_detail_house_2").removeClass("hide");
        $("#no_detail_house_1").removeClass("hide");

    }

    var table_data;

    function search_region() {

        $("#house_table_body").empty();
        $("#fenye_father").empty();

        city = $("#region_li").text();
        region = $("#house_li").text();

        zhuangxiu = $("#zhuangxiu option:selected").val();
        huxing = $("#huxing option:selected").val();
        louceng = $("#louceng option:selected").val();
        chanquan = $("#chanquan option:selected").val();
        diya = $("#diya option:selected").val();
        mianji = $("#mianji option:selected").val();
        fangjia = $("#fangjia option:selected").val();


        $.ajax({
            url: '/house/detail/?province=' + "{{ province }}" + "&city=" + city + "&region=" + region + "&zhuangxiu=" + zhuangxiu + "&huxing=" + huxing + "&louceng=" + louceng + "&chanquan=" + chanquan + "&diya=" + diya + "&mianji=" + mianji + "&fangjia=" + fangjia,
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {

                all_house_info = res.data.jsonData;
                maxFenye = res.data.maxFenye;
                index_list = res.data.index_list;

                table_data = all_house_info;

                cnt = 0;
                for (item in all_house_info) {
                    if (cnt === 10) {
                        break;
                    }
                    cnt++;
                    var rowData = $('<tr ' + 'onclick=clk_row(' + index_list[item] + ',' + item + ') ></tr>');
                    maxCol = 12;
                    cnt_col = 0;
                    for (info in all_house_info[item]) {
                        var tth = $('<th >' + all_house_info[item][info] + '</th>');
                        tth.css('border','2px solid black');
                        {#rowData.append('<th >' + all_house_info[item][info] + '</th>');#}
                        rowData.append(tth);
                        if (cnt_col === maxCol) {
                            break;
                        }
                        cnt_col++;
                    }
                    $("#house_table_body").append(rowData);
                }

                i = 0;
                while (i < maxFenye) {
                    var la = $('<li><a style="border:2px solid black;border-radius: 0;background-color: #6f2232; color:white"   onclick="fenye(this)">' + i + '</a></li>');
                    la.css("background-color","black")
                    {#$("#fenye_father").append('<li><a onclick="fenye(this)">' + i + '</a></li>');#}
                    $("#fenye_father").append(la);
                    i++;
                }
                {#$("#fenye-father").append("<li><a aria-label='Next'><span aria-hidden='true'>»</span></a></li>")#}

            }
        })


    }

    function fenye(self) {

        cur = $(self).text();
        console.log("当前页:" + cur);

        base = 10 * cur;
        cnt = 0;
        $("#house_table_body").empty();
        while (cnt < 10) {
            cur_index = base + cnt;
            maxCol = 12;
            cnt_col = 0;
            var rowData = $('<tr ' + 'onclick=clk_row(' + index_list[cur_index] + ',' + cur_index + ') ></tr>');
            for (info in all_house_info[cur_index]) {
                var tth = $('<th >' + all_house_info[base+cnt][info] + '</th>');
                tth.css('border','2px solid black');
                        {#rowData.append('<th >' + all_house_info[item][info] + '</th>');#}
                rowData.append(tth);

                if (cnt_col === maxCol) {
                    break;
                }
                cnt_col++
            }
            $("#house_table_body").append(rowData);
            cnt++;
        }

    }

    function clk_row(id, index) {
        console.log("id:" + id, "index:" + index);

        $("#no_detail_house_1").addClass("hide");
        $("#no_detail_house_2").addClass("hide");

        $("#detail_house_1").removeClass("hide");
        $("#detail_house_2").removeClass("hide");

        s1 = all_house_info[index][4]
        s2 = all_house_info[index][6]
        s3 = all_house_info[index][9]
        s4 = all_house_info[index][2]
        s5 = all_house_info[index][5]
        {#s6 = all_house_info[index][3]#}
        s7 = all_house_info[index][3]
        {#s8 = all_house_info[index][4]#}
        s9 = all_house_info[index][12]
        {#s10 = all_house_info[index][4]#}
        s11 = all_house_info[index][7]
        s12 = all_house_info[index][8]


        $.ajax({
            url: '/house/feature/?id=' + id,
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                s13 = res.data.ret[0]
                s14 = res.data.ret[1]
                s15 = res.data.ret[2]

                $("#span13").text(s13);
                $("#span14").text(s14);
                $("#span15").text(s15);
            }
        })


        $("#span1").text(s1);
        $("#span2").text(s2);
        $("#span3").text(s3);
        $("#span4").text(s4);
        $("#span5").text(s5);
        $("#span7").text(s7);
        $("#span9").text(s9);
        $("#span11").text(s11);
        $("#span12").text(s12);


        {#var map = new BMap.Map("baidu_map", {#}
        {#    coordsType: 5 // coordsType指定输入输出的坐标类型，3为gcj02坐标，5为bd0ll坐标，默认为5。#}
        {#                  // 指定完成后API将以指定的坐标类型处理您传入的坐标#}
        {# });          // 创建地图实例#}
        {#var point = new BMap.Point(103.738272, 36.098131);  // 创建点坐标#}
        {#map.centerAndZoom(point, 15);#}
        {#var opts = {#}
        {#    width: 250,     // 信息窗口宽度#}
        {#    height: 100,     // 信息窗口高度#}
        {#    title: "这是标题"  // 信息窗口标题#}
        {# } #}

        add_name = all_house_info[index][13] + "市" + all_house_info[index][0];
        console.log(add_name)
        var map = new BMap.Map("baidu_map");
        {#map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);#}
// 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(add_name, function (point) {
                {#if (point) {#}
                map.centerAndZoom(point, 16);
                {#point.x += 0.03;#}
                point.y += 0.33;
                map.addOverlay(new BMap.Marker(point));
                {# } #}
            },
            "");


        {#var infoWindow = new BMap.InfoWindow("这是内容", opts);  // 创建信息窗口对象#}
        {#map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口#}


    }

    function back_region() {

        $("#map_list").addClass("hide");
        $("#detail_house_2").addClass("hide");
        $("#detail_house_1").addClass("hide");
        $("#city_map").addClass("hide");


        $("#no_detail_house_1").removeClass("hide");
        $("#slt_item").removeClass("hide");
        $("#no_detail_house_2").removeClass("hide");
        $("#region_table").removeClass("hide");

    }


</script>
</body>
</html>